<template>
	<div class="win win-profile">
		<div class="title-wrap">
			<span class="title">
				{{ $t('change_password') }}
			</span>
		</div>

		<div class="content-wrap">
			<div class="content">
				<div class="form-group">
					<span>{{ $t('password') }}</span>

					<input type="password" v-model="oldPasswd">
				</div>

				<div class="form-group">
					<span>{{ $t('new_password') }}</span>

					<input type="password" v-model="newPasswd">
				</div>

				<div class="form-group">
					<span>{{ $t('check_password') }}</span>

					<input type="password" v-model="checkNewPasswd">
				</div>
			</div>

			<div class="tips-container">
				<span v-if="message" class="tips" :class="msgClass">
					{{ message }}
				</span>
			</div>


			<div class="func-btn-group">
				<button class="btn btn-success" @click="submit">
					{{ $t('submit') }}
				</button>

				<button class="btn btn-warning" @Click="reset">
					{{ $t('reset') }}
				</button>
			</div>
		</div>
	</div>
</template>


<script type="module">
import { UserService } from '@/common/common.object'
import { store } from '@/common/store';

export default {
	data() {
		return {
			oldPasswd: null,
			newPasswd: null,
			checkNewPasswd: null,
			message: null,
			msgClass: "failure",
		};
	},
	methods: {
		submit() {
			if (this.newPasswd !== this.checkNewPasswd) {
				this.message = "新密码两次输入不一致";
				return;
			}


			this.message = null;


			UserService.changePassword(this.oldPasswd, this.newPasswd)
				.then(() => {
					this.message = "修改密码成功";
					this.msgClass = "success";
				})
				.catch(error => {
					this.message = error;
					this.msgClass = "failure";
				});
		},
		reset() {
			this.message = null;
			this.oldPasswd = null;
			this.newPasswd = null;
			this.checkNewPasswd = null;
		},
	}
};
</script>



<style scoped>
.win {
	margin: 0 auto;
	width: 560px;

	border: 1px solid #337ab7;
	border-radius: 6px;
}

.win>.title-wrap {
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px 15px;

	font-size: 16px;

	border-bottom: 1px solid transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	color: #fff;
	background-color: #337ab7;
}

.win>.content-wrap {
	padding: 15px;
}



.win>.content-wrap>.content>.form-group {
	margin-bottom: 15px;
	line-height: 34px;

	font-size: 14px;
}


.win>.content-wrap>.content>.form-group>span {
	display: inline-block;
	margin-right: 8px;
	width: 30%;

	text-align: right;
}

.win>.content-wrap>.content>.form-group>input {
	margin-left: 8px;
	padding: 6px 12px;
	width: 60%;
	height: 22px;

	background-color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	opacity: 1;
	box-sizing: content-box;
}

.win>.content-wrap>.content>.form-group>input:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}


.func-btn-group {
	text-align: center;
}

.tips-container {
	margin-bottom: 15px;

	line-height: 32px;
	text-align: center;
}



.tips.success {
	color: green;

	background-color: transparent;
}

.tips.failure {
	color: red;

	background-color: transparent;
}

.func-btn-group .btn {
	margin: 0 0.5rem;
}

</style>
